<template>
	<view class="page-index" :class="{'bgf':navIndex >0}">
		<!-- #ifdef H5 -->
		<view class="header">
			<view class="serch-wrapper flex acea-row row-between-wrapper">
				<view class="logo">
					<text>展厅</text>
				</view>
				<navigator 
					url="/pages/columnGoods/goods_search/index" 
					class="uninput" 
					hover-class="none">
					<text class="iconfont icon-xiazai5"></text>
					搜索商品
				</navigator>
			</view>
			<tabNav class="tabNav" :class="{'fixed':isFixed}" :tabTitle="navTop" @changeTab='changeTab'></tabNav>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP -->
		<view class="mp-header">
			<view class="sys-head" view :style="{ height: statusBarHeight }"></view>
			<view class="serch-box" view style="height: 43px;">
				<view class="serch-wrapper flex">
					<view class="logo">
						<text>展厅</text>
					</view>
					<navigator 
						url="/pages/columnGoods/goods_search/index" 
						class="uninput" 
						hover-class="none">
						<text class="iconfont icon-xiazai5"></text>
						搜索商品
					</navigator>
				</view>
			</view>
			<tabNav class="tabNav" :tabTitle="navTop" @changeTab='changeTab'></tabNav>
		</view>
		<!-- #endif -->
		
		<view class="page_content" :style="{marginTop:mpHeight+'px'}">
			<!-- banner -->
			<view class="swiper">
				<swiper 
					indicator-dots="true"
					:autoplay="true" 
					:circular="true" 
					:interval="3000" 
					:duration="500"
					indicator-color="#E4E4E4" 
					indicator-active-color="#E93323" 
					previous-margin="40rpx" 
					next-margin="40rpx" 
					:current="swiperCur"
					@change="swiperChange">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item :class="{active:index == swiperCur}">
							<view @click="$util.on(item.url)" class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
								<image :src="item.pic" class="slide-image"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	
		<view class="cate_content">
			<scroll-view 
				scroll-y="true" 
				:scroll-with-animation="true" 
				:scroll-top="scrollTop" 
				class="cate_tab" 
				:style="{height: scrollHeight+'px'}">
				<view 
					class="tab_item" 
					:class="curTab == index ? 'act_tab' : ''" 
					v-for="(item,index) in areaList" 
					:key="index"
					@click="cateTabClick(index, item.id)"
				>{{ item.name }}</view>
			</scroll-view>
			<view>
				<view class="cate_list" :style="{height: scrollHeight +'px'}">
					<view class="screen">
						<view class="screen_item" @click="sort('multiple')">
							<text>综合</text>
						</view>
						<view class="screen_item" @click="sort('sales')">
							<text>销量</text>
							<view class="sort">
								<text :style="{'border-bottom-color': sortOrder == '1' ? '#f00' : ''}"></text>
								<text :style="{'border-top-color': sortOrder == '2' ? '#f00' : ''}"></text>
							</view>
						</view>
						<view class="screen_item" @click="sort('price')">
							<text>价格</text>
							<view class="sort">
								<text :style="{'border-bottom-color': priceSort == '1' ? '#f00' : ''}"></text>
								<text :style="{'border-top-color': priceSort == '2' ? '#f00' : ''}"></text>
							</view>
						</view>
					</view>
					<scroll-view 
						@scrolltolower="scrolltoLower" 
						class="cate_body" 
						scroll-y="true" 
						:style="{height: scrollHeight - 50 +'px'}">
						<view class="cate_cell" v-for="(item, index) in list" :key="index">
							<image :src="item.image" mode="scaleToFill" @click="goodDetail(item.product_id)"></image>
							<view class="cell_right">
								<view class="" @click="goodDetail(item.product_id)">
									<text class="title">{{ item.store_name }}</text>
									<text class="price">￥{{ item.price }}</text>
									<view class="rate">{{ item.rate }}评分 {{ item.reply_count || 0 }}条评论</view>
								</view>
								<view class="shop">
									<text>{{ item.mer_name }}</text>
									<navigator :url="'/pages/store/home/index?id=' + item.mer_id">进店 
										<text class="iconfont icon-jiantou" hover-class='none'></text>
									</navigator>
								</view>
							</view>
						</view>
						<view class="loading">
							<view class="load" v-if="loading">
								<text class="iconfont icon-jiazai"></text>
								<text>正在加载中</text>
							</view>
							<view class="nomore" v-else>
								<image v-if="list.length == 0" src="/static/images/empty-box.png" mode=""></image>
								<text>没有更多了</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import tabNav from '@/components/tabNav.vue'
	import {
		getIndexData
	} from '@/api/api.js';
	import {
		exhibitionList,
		areaHallList,
		HallList
	} from '@/api/exhibition_hall.js';
	export default {
		components: {
			tabNav,
		},
		data() {
			return {
				navIndex: 0,
				logoUrl: '',
				userInfo: '',
				isFixed: false,
				navTop: [],
				statusBarHeight: statusBarHeight,
				swiperCur: 0,
				imgUrls: [],
				mpHeight: 0,
				scrollHeight: 0,
				swiperHeight: 0,
				curTab: 0,
				loading: true,
				scrollTop: 0,
				sortOrder: '',
				priceSort: '',
				conSort: '1',
				areaList: [],
				list: [],
				pageIndex: 1
			};
		},
		onLoad() {
			this.getIndexConfig()
			this.getExhibitionList()
		},
		onReady() {
			let self = this
			// #ifdef MP
			setTimeout(res => {
				let info = uni.createSelectorQuery().select(".mp-header");
				info.boundingClientRect(function(data) { //data - 各种参数
					self.mpHeight = data.height
					self.getInfo()
				}).exec()
				
			}, 80)
			// #endif
			// #ifdef H5
			self.getInfo()
			// #endif
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: '',
				imageUrl: '',
				path: '',
			}
		},
		onShareTimeline: function() {
			return {
				title: '',
				imageUrl: ''
			}
		},
		// #endif
		methods: {
			// 获取tab分类列表
			getExhibitionList() {
				exhibitionList().then(res => {
					// console.log(res)
					var newArr = res.data.map(item => ({
					    cate_name: item.name,
					    id: item.id,
						sort: item.sort
					}))
					// newArr.unshift({
					// 	cate_name: '全部',
					// 	id: '',
					// 	sort: ''
					// })
					// this.sortByKey(newArr,'sort')
					this.navTop = newArr
					this.cateId = newArr[0].id
					this.getAreaHallList()
				})
			},
			// 地区展馆列表
			getAreaHallList () {
				areaHallList({
					categoryId: this.cateId
				}).then(res => {
					// console.log(res)
					// if (res.data.length > 0) {
						this.areaList = res.data
						this.areaList.unshift({
							name:'全部',
							id:''
						})
						this.areaId = res.data[0].id
						this.getHallList()
					// }
				})
			},
			// 分类展馆下的商品列表
			getHallList() {
				HallList({
					areaId: this.areaId,
					categoryId: this.cateId,
					page: this.pageIndex,
					sales: this.sortOrder,
					price: this.priceSort,
					con: this.conSort
				}).then(res => {
					// console.log(res.data.list)
					if(res.data.list.length < 10) {
						this.loading = false
					}
					this.list.push(...res.data.list)
				})
			},
			changeTab(e) {
				this.list = []
				this.loading = true
				this.pageIndex = 1
				const index = e.index
				this.cateId = this.navTop[index].id
				this.getAreaHallList()
				// this.getHallList()
			},
			goodDetail(id) {
				uni.navigateTo({
					url: '/pages/goods_details/index?id=' + id
				})
			},
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					that.$set(that, "imgUrls", res.data.banner);
				})
			},
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail
				if (source === 'autoplay' || source === 'touch') {
					//根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。
					// touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，
					// 只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
					this.swiperCur = e.detail.current
				}
			},
			getInfo(){
				let self = this;
				let query = uni.createSelectorQuery().in(this).select(".swiper");
				query.boundingClientRect(function(data) { //data - 各种参数
					// #ifdef H5
					let tabbarHeight = 90
					// #endif
					// #ifdef MP
					let tabbarHeight = 0
					// #endif
					uni.getSystemInfo({
						success: function(res) {
							self.scrollHeight = res.windowHeight - data.height - self.mpHeight - tabbarHeight
						},
					});
				}).exec()
			},
			cateTabClick(index, id) {
				this.list = []
				this.loading = true
				this.pageIndex = 1
				this.curTab = index
				this.scrollTop = (index-1)*50
				this.areaId = id
				this.getHallList()
			},
			scrolltoLower () {
				console.log(111)
				this.pageIndex++
				this.getHallList()
			},
			sort (type) {
				this.list = []
				this.loading = true
				this.pageIndex = 1
				switch(type) {
					case 'sales':
						this.priceSort = ''
						this.sortOrder == '1' ? this.sortOrder = '2' : this.sortOrder = '1'
						break;
					case 'price':
						this.sortOrder = ''
						this.priceSort == '1' ? this.priceSort = '2' : this.priceSort = '1'
						break;
					case 'multiple':
						this.priceSort = ''
						this.sortOrder = ''
						this.conSort == '1' ? this.conSort = '2' : this.conSort = '1'
						break;
				}
				this.getHallList()
			},
			sortByKey(array,key){
			    return array.sort(function(a,b){
			        var x = a[key];
			        var y = b[key];
			        return((x<y)?((x<y)?1:0):-1);
			    })
			}
		}
	}
</script>

<style lang="scss">
	.page-index {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);

		.header {
			width: 100%;
			.serch-wrapper {
				align-items: center;
				padding: 20rpx 30rpx 0 30rpx;

				.logo {
					width: 100rpx;
					height: 46rpx;
					font-weight: 700;
				}
				.input,.uninput {
					display: flex;
					align-items: center;
					max-width: 490rpx;
					min-width: 460rpx;
					height: 64rpx;
					padding: 0 0 0 30rpx;
					background: rgba(237, 237, 237, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 32rpx;
					color: #BBBBBB;
					font-size: 28rpx;
					.iconfont {
						margin-right: 20rpx;
					}
				}
				.uninput{
					min-width: 540rpx;
					max-width: 620rpx;
				}
			}

			.tabNav {
				padding-top: 24rpx;
			}
		}
		/* #ifdef MP */
		.mp-header {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-bottom: 20rpx;
			/* #endif */
			// background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);
			background-color: #fff;

			.serch-wrapper {
				height: 100%;
				align-items: center;
				padding: 0 50rpx 0 25rpx;
				.logo {
					width: 75rpx;
					height: 46rpx;
					font-weight: 700;
				}
				.input,.uninput {
					display: flex;
					align-items: center;
					width: 305rpx;
					height: 58rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 28rpx;
					
					.iconfont {
						margin-right: 20rpx;
					}
					
				}
				.uninput{
					min-width: 400rpx;
					max-width: 480rpx;
				}
				
			}
		}

		/* #endif */

		.page_content {

			/* #ifdef MP */
			margin-top: 270rpx;

			/* #endif */
			.swiper {
				position: relative;
				width: 100%;
				/* #ifdef MP */
				height: 320rpx;
				/* #endif */
				/* #ifdef H5 */
				height: 320rpx;
				/* #endif */

				margin: 0 auto;
				border-radius: 10rpx;
				overflow-x: hidden;
				/* #ifdef MP */
				z-index: 10;

				/* #endif */
				swiper,
				.swiper-item,
				image {
					width: 100%;
					height: 280rpx;
					border-radius: 10rpx;

				}

				.slide-navigator {}

				image {
					transform: scale(.93);
					transition: all .6s ease;
				}

				swiper-item.active {
					image {
						transform: scale(1);
					}
				}
			}

		}
		.cate_content {
			display: flex;
			width: 100%;
			background-color: #f7f7f7;
			.cate_tab {
				width: 200rpx;
				background-color: #fff;
				.tab_item {
					display: flex;
					align-items: center;
					justify-content: center;
					padding-left: 10rpx;
					width: 200rpx;
					height: 100rpx;
				}
				.act_tab {
					background-color: #f5f5f5;
					border-left: 4rpx solid #fc4141;
					width: 100%;
					text-align: center;
					color: #fc4141;
					font-weight: bold;
				}
			}
			.uni-scroll-view-content {
				position: relative;
			}
			.cate_list {
				position: relative;
				flex: 1;
				background-color: #f9f9f9;
				padding-left: 20rpx;
				overflow-x: hidden;
				.screen {
					position: sticky;
					top: 0;
					display: flex;
					align-items: center;
					width: 100%;
					height: 100rpx;
					background-color: #f9f9f9;
					z-index: 999;
					.screen_item {
						display: flex;
						align-items: center;
						padding: 0 30rpx;
						.sort {
							display: flex;
							flex-direction: column;
							margin-left: 10rpx;
							text:first-child {
								width: 0;
								height: 0;
								border: 8rpx solid transparent;
								border-bottom-color: #999;
								margin-bottom: 2rpx;
							}
							text:last-child {
								width: 0;
								height: 0;
								border: 8rpx solid transparent;
								border-top-color: #999;
								margin-top: 2rpx;
							}
						}
					}
				}
				.cate_body {
					width: 100%;
					
					.cate_cell {
						display: flex;
						width: 100%;
						background-color: #fff;
						margin-bottom: 10rpx;
						padding: 20rpx;
						border-radius: 10rpx 0 0 10rpx;
						image {
							display: block;
							width: 150rpx;
							height: 150rpx;
							margin-right: 20rpx;
						}
						.cell_right {
							flex: 1;
							.title {
								display: block;
								width: 300rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								color: #000;
								margin-bottom: 5rpx;
							}
							.price {
								color: #F00;
								font-weight: 700;
								margin-bottom: 5rpx;
							}
							.rate {
								font-size: 24rpx;
								color: #999;
								margin-bottom: 5rpx;
							}
							.shop {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								text {
									color: #999;
									margin-right: 20rpx;
								}
								.iconfont {
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}
		}
		.loading {
			.load {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.icon-jiazai {
				display: block;
				margin-right: 10rpx;
				animation: mymove 0.8s linear infinite;
			}
			@keyframes mymove
			{
				from {transform: rotate(0deg);}
				to {transform: rotate(360deg);}
			}
			.nomore {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				image {
					width: 350rpx;
					height: 300rpx;
					margin-top: 100rpx;
				}
			}
		}
	}
</style>
